<template>
	<van-grid :border="false"  :column-num="2">
		<van-grid-item v-for="(item,index) in list" 
				:key="index" @click='toDetails(item)'>
			<van-image :src="item.img[0]||''"></van-image>
			<div>{{item.name}}</div>
			<div class="gray_text">{{item.content}}</div>
			<div class="cart-wrap">
				<div>
					<span style="color:red">¥{{item.price}}</span>
					<span class="gray_text">/束</span>
				</div>
				<van-icon name="shopping-cart-o" color="red" @click="addCart(item)"></van-icon>
			</div>
		</van-grid-item>
	</van-grid>
</template>

<script>
		import {mapActions} from 'vuex' 
	
	export default{
		components:{
			
		},
		props:['list'],
		methods:{
			...mapActions(['addCart']),
			toDetails(goods){
				console.log(goods)
				this.$router.push({path:'/detail',query:{'goods':goods}});
			}
		},
		
	}
</script>

<style scoped="scoped">
	.cart-wrap{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.gray_text{
		color:#ccc;
	}
</style>
